<template>
    <gracePage statusBarBG="#f7f7f7" :headerHeight="0" :isSwitchPage="true">
        <!-- 页面主体 -->
        <view slot="gBody" class="demo_body">
            <!-- 广告 -->
            <image src="../../static/menu_imgs/banner.png" mode="widthFix" class="banner"></image>

            <!-- tab -->
            <view style="background-color:#FFFFFF;" :class="[isFixed ? 'grace-fixed-top' : '']">
                <graceNavBar :isCenter="true" :items="navItems" lineHeight="80rpx" :currentIndex="navIndex" :size="375"
                    activeLineBg="#3688FF" textAlign="center" activeColor="#3688FF" activeLineWidth="100%"
                    activeLineHeight="6rpx" @change="navChange"></graceNavBar>
            </view>

            <!-- 标题 -->
            <view class="grace-margin-top">
                <view class="grace-h5 grace-blod grace-text-center">
                    <text class="grace-gray  grace-text-small" style="margin:0 20rpx;">截止{{updatetime}}数据统计</text>
                </view>
                <view class="grace-h5 grace-blod grace-text-center">
                    <text class="grace-title-text grace-black">{{lunbo}}</text>
                </view>
            </view>

            <!-- 公告 -->
            <view class="scrolldemo grace-margin-top">
                <text class="scroll-icon grace-icons icon-speaker grace-blue"></text>
                <view style="width:650rpx;">
                    <graceScroll>
                        <text>{{title}}</text>
                    </graceScroll>
                </view>
            </view>

            <!-- 标题 -->
            <view class="grace-title grace-margin-top grace-border-b">
                <text class="grace-title-icon grace-icons icon-address icon grace-blue "></text>
                <text class="grace-title-text grace-blue ">疫情地图</text>
            </view>
            <!-- 地图 -->
            <image src="../../static/menu_imgs/map.jpg" mode="widthFix" class="mapImg"></image>
            <!-- 文字列表 -->
            <!-- <view class="grace-list grace-margin-top">
                <view class="grace-list-items">
                    <view class="grace-list-body grace-border-b">
                        <view class="grace-list-title">
                            <text class="grace-list-title-text">湖北省武汉市确诊198列,治愈25列</text>
                        </view>
                    </view>
                </view>

            </view> -->
            <view style="padding:40rpx;">

                <rich-text class="grace-margin-top areaList" :nodes="area_text"></rich-text>
            </view>
            <!-- 时间轴 -->
            <view class="timeBox" ref="timeBox">

                <view class="grace-time-line grace-nowrap grace-flex-end grace-margin-top" v-for="(item,index) in list "
                    :key="index" @click="onLink(item.url)">
                    <view class="grace-time-line-face">
                        <view class="grace-text-black grace-text-small">
                            <div class="tag" v-if="index == 0">最新</div>
                            {{item.time}}
                        </view>
                    </view>
                    <view class="grace-time-line-body">
                        <view class="grace-time-line-txt grace-border-radius-small">
                            <div class="grace-text-black grace-bold ">{{item.title}}</div>
                            <rich-text class="grace-gray grace-desc" :nodes="item.content"></rich-text>
                        </view>
                        <text class="grace-time-line-time grace-gray">信息来源:{{item.source}}</text>
                    </view>
                </view>
            </view>
            <view class="fenxiang" v-if="show" @click="show=false">
                <image src="../../static/menu_imgs/fenxiang.png" mode="widthFix" class="arrow"></image>
                <view class="hint">
                    点击右上角更多<br>
                    分享给好友或到朋友圈
                </view>
            </view>
        </view>
        <view slot="gFooter" class="demo_footer" @click="show = true">
            分享
        </view>

    </gracePage>
</template>
<script>
    import gracePage from "../../graceUI/components/gracePage.vue";
    import graceNavBar from "../../graceUI/components/graceNavBar.vue";
    import graceScroll from '../../graceUI/components/graceScroll.vue';

    // 演示调用 common.js
    var common = require('../../common.js');
    export default {
        data() {
            return {
                navItems: ['疫情地图', '实时播放'],
                navIndex: 0,
                isFixed: false,
                // 顶部内容高度
                headerHeight: 260,
                speakerMsgs: [{
                        title: "GraceUI 更快、更好的前端UI",
                        url: "../index/index",
                        opentype: "navigate"
                    },
                    {
                        title: "Hcoder.net - 精品 IT 课程中心",
                        url: "../index/index",
                        opentype: "switchTab"
                    }
                ],
                list: [],
                title: '',
                area_text: '',
                updatetime: '',
                lunbo: '',
                show:false
            }
        },
        components: {
            gracePage,
            graceNavBar,
            graceScroll
        },
        onReady: function() {
            var _self = this;
            // 获取顶部内容高度
            uni.createSelectorQuery().select('#header').fields({
                size: true
            }, function(res) {
                if (!res) {
                    return;
                }
                _self.headerHeight = res.height;
            }).exec();
        },
        onLoad: function() {
            uni.request({
                url: 'http://virus.wztctech.com/index/index/getlatestinfo', //仅为示例，并非真实接口地址。
                success: (res) => {
                    console.log(res.data);
                    this.list = res.data.list;
                    this.title = res.data.title;
                    this.area_text = res.data.area_text;
                    this.updatetime = res.data.updatetime;
                    this.lunbo = res.data.lunbo;
                }
            });

        },
        onPageScroll: function(e) {
            if (e.scrollTop + 100 >= this.$refs.timeBox.$el.offsetTop) {
                this.navIndex = 1;
            } else {
                this.navIndex = 0;
            }
            // 根据滚动高度动态吸顶
            if (e.scrollTop >= this.headerHeight) {
                this.isFixed = true;
            } else {
                this.isFixed = false;
            }
        },
        methods: {
            navChange(index) {
                console.log(index)
                this.navIndex = index;

                if (index == 0) {
                    uni.pageScrollTo({
                        scrollTop: 0,
                        duration: 0
                    });
                } else {
                    uni.pageScrollTo({
                        scrollTop: this.$refs.timeBox.$el.offsetTop - 100,
                        duration: 0
                    });
                }
            },
            onLink(url) {
                window.location.href = url
            }
        },
        mounted() {},

    }
</script>

<style lang="less">
    .scrolldemo {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 15rpx;
        background: #F5F6F8;
    }

    .demo_body {
        padding-bottom: 100rpx;
    }

    .scroll-icon {
        width: 60rpx;
        text-align: center;
        font-size: 32rpx;
        height: 60rpx;
        line-height: 60rpx;
        flex-shrink: 0;
    }

    .demo_footer {
        height: 100rpx;
        background-color: #3688FF;
        color: #fff;
        text-align: center;
        line-height: 100rpx;
        font-size: 32rpx;
        font-weight: bold;
    }

    .banner {
        display: block;
        height: 260rpx;
        width: 100%;
    }

    .mapImg {
        width: 100%;
        display: block;
    }

    .grace-time-line {
        position: relative;
    }

    .grace-time-line-face {
        width: 250rpx;
        height: 80rpx;
        overflow: hidden;
        position: absolute;
        z-index: 0;
        left: 0;
        top: 0;
        font-size: 0;
        text-align: right;
        font-size: 24rpx;
        padding-right: 16rpx;
        box-sizing: border-box;
    }

    .grace-time-line-icon {
        width: 80rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        display: block;
        font-size: 38rpx;
        border-radius: 80rpx;
    }

    .grace-time-line-face-img {
        width: 80rpx;
        height: 80rpx;
        border-radius: 80rpx;
    }

    .grace-time-line-body {
        width: 500rpx;
        border-left: 1rpx solid #F6F7F8;
        font-size: 0;
        padding: 0 20rpx 20rpx 30rpx;
        box-sizing: border-box;
    }

    .grace-time-line-txt {
        line-height: 40rpx;
        font-size: 26rpx;
        display: block;
        background-color: #F8F8F8;
        padding: 20rpx;
    }

    .grace-time-line-time {
        line-height: 36rpx;
        font-size: 22rpx;
        display: block;
        text-align: right;
        margin-top: 3px;
    }

    .grace-time-line-image {
        width: 600rpx;
    }

    .tag {
        float: left;
        padding: 0 8rpx;
        line-height: 32rpx;
        font-size: 24rpx;
        background-color: red;
        color: #fff;
        font-weight: bold;
        border-radius: 3rpx;
        margin: 6rpx 0 0 16rpx;
    }

    .areaList {
        font-size: 26rpx;
        color: #666;
        line-height: 44rpx;
    }

    .fenxiang {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(0, 0, 0, .6);
        z-index: 999;
    }

    .fenxiang .arrow {
        position: absolute;
        width:200rpx;
        right:0;
        top:0;
    }

    .fenxiang .hint {
        font-size: 26rpx;
        font-weight: 500;
        color: #fff;
        position: absolute;
        top:200rpx;
        right:200rpx;
    }
</style>
